<template>
    <!-- 数据列表 -->
    <div class="add-box">
        <div class="left">
            <el-icon>
                <Tickets />
            </el-icon>
            <span>数据列表</span>
        </div>
        <el-button @click="addReturn">添加</el-button>
    </div>

    <!-- 订单数据表格 -->
    <el-table :data="list" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column prop="id" label="编号" width="100" align="center" />
        <el-table-column prop="name" label="原因类型" align="center" />
        <el-table-column prop="sort" label="排序" width="100" align="center" />
        <el-table-column label="是否启用" align="center">
            <template #default="scope">
                <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
                    @change="changHandle(scope.row)" />
            </template>
        </el-table-column>
        <el-table-column prop="createTime" label="添加时间" width="200" align="center">
            <template #default="scope">
                {{ fomatDate(scope.row.createTime) }}
            </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
            <template #default="scope">
                <el-button @click="edit(scope.row.id)">编辑</el-button>
                <el-button @click="Delete(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 批量操作和分页 -->
    <div class="bottom">
        <div class="left">
            <el-select v-model="value" class="m-2" placeholder="批量操作" @change="select">
                <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button type="primary" @click="DeleteAll">确定</el-button>
        </div>

        <!-- 底部分页 -->
        <ElConfigProvider :locale="zhCn">
            <el-pagination v-model:currentPage="page.pageNum" v-model:page-size="page.pageSize" background
                layout="total, sizes, prev, pager, next ,jumper" :total="total" @size-change="pageSizeChagne"
                @current-change="currentChagne" :page-sizes="[5, 10, 15]" />
        </ElConfigProvider>
    </div>

    <AddReturn :show="showAddReturn" @hide="hideClose" :editId="editId" @refsh="getReturnReason" />
</template>
<script setup lang='ts'>
import { user } from "@/api";
import { Tickets } from "@element-plus/icons-vue";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ref, reactive, toRefs } from 'vue'
import { fomatDate } from "@/utils"
import AddReturn from "./components/addReturn.vue"
import { ElMessage, ElMessageBox } from "element-plus";



const value = ref('')

const option = [
    {
        value: "删除",
        label: "删除"
    }
]

const state = reactive<IReturnReasonParams>({
    list: [],
    page: {
        pageNum: 1,
        pageSize: 5
    },
    total: 0,

})



const getReturnReason = () => {
    user.getReturnReasonApi(state.page).then((res) => {
        if (res.code === 200) {
            // console.log(res.dat);
            state.list = res.data.list
            state.total = res.data.total
        }
    })
}
getReturnReason()

const pageSizeChagne = () => {
    getReturnReason()
}

const currentChagne = () => {
    getReturnReason()
}

//批量删除
// 先定义一个空数组来接受每一个勾选的id
const ids = ref<number[]>([])
const handleSelectionChange = (val: IReturnReasonList[]) => {
    ids.value = val.map(item => item.id)
    // console.log(ids.value)
}

// 拿到选择器中的参数
const optVal = ref('')
const select = (val: string) => {
    console.log(val);
    optVal.value = val
}

//批量删除点击确定
const DeleteAll = () => {
    if (optVal.value === "删除") {
        user.getDeleteReasonApi(ids.value).then((res) => {
            if (res.code === 200) {
                // console.log(res.data);
                ElMessageBox.confirm(
                    '是否要进行删除操作?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        ElMessage({
                            type: 'success',
                            message: '删除成功!',
                        })
                        getReturnReason()
                    })
                    .catch(() => {

                    })
            }
        })
    } else {
        ElMessage.warning("请选择需要进行的操作！")
    }
}

// 点击单个删除
const Delete = (id: number) => {
    user.getDeleteReasonApi([id]).then((res) => {
        if (res.code === 200) {
            // console.log(res.data);
            ElMessageBox.confirm(
                '是否要进行删除操作?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    ElMessage({
                        type: 'success',
                        message: '删除成功!',
                    })
                    getReturnReason()
                })
                .catch(() => {

                })
        }
    })
}


// 改变启用状态
const changHandle = (row: IReturnReasonList) => {
    user.getUpdateStatusApi({ ids: [row.id], status: row.status }).then((res) => {
        if (res.code === 200) {
            ElMessage.success("修改成功!!")
        }
    })
}


// 点击添加
const showAddReturn = ref(false)
const addReturn = () => {
    showAddReturn.value = true
}

// 点击取消
const hideClose = () => {
    showAddReturn.value = false
    editId.value = 0
    // 还要把 editId 归 0

}

// 点击编辑
const editId = ref(0)
const edit = (id: number) => {
    // console.log(id);
    showAddReturn.value = true
    editId.value = id
}


let { list, page, total } = toRefs(state)
</script>
<style lang="less" scoped>
.add-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    margin: 20px 0;
    border-radius: 5px;
    box-shadow: 0 0 4px 2px #ccc;

    .left {
        display: flex;
        align-items: center;
        padding: 0 10px;

        .el-icon {
            margin-right: 10px;
        }

    }
}

.bottom {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;

    .left {
        .el-button {
            margin-left: 10px;
        }
    }
}
</style>